<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .contain {
        width: 250px;
        height: 400px;
        border: 3px solid #efefef;
        margin: 100px auto;
        position: relative;
        overflow: hidden;
      }
      .wrap {
        /* width: 1000%; */
        position: absolute;
        cursor: pointer;
        /* transition: all 0.5s;   */
      }
      .swiper {
        width: 250px;
        height: 400px;
        float: left;
        background-color: aqua;
      }
      .swiper:nth-child(2) {
        background-color: antiquewhite;
      }
      .swiper:nth-child(8) {
        background-color: antiquewhite;
      }
      .swiper:nth-child(3) {
        background-color: orange;
      }
      .swiper:nth-child(4) {
        background-color: rgb(79, 152, 111);
      }
      .swiper:nth-child(5) {
        background-color: rgb(215, 33, 39);
      }
      .swiper:nth-child(6) {
        background-color: rgb(125, 82, 26);
      }
      .contain btn {
        position: absolute;
        background-color: antiquewhite;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="contain">
      <div class="wrap">
        <div class="swiper">6</div>
        <div class="swiper">1</div>
        <div class="swiper">2</div>
        <div class="swiper">3</div>
        <div class="swiper">4</div>
        <div class="swiper">5</div>
        <div class="swiper">6</div>
        <div class="swiper">1</div>
      </div>
    </div>
    <script>
      let wrap = document.querySelector(".wrap");
      let swiper = document.querySelectorAll(".swiper");
      let contain = document.querySelector(".contain");
      let X1 = 0;
      let X2 = 0;
      let speed = swiper[0].offsetWidth;
      // 严谨一些  为了防止用户不小心点击了一下却没移动，我们就在鼠标移除的时候不用计算那么步骤了，节省性能
      let flag = false
      // 设置包含滑块容器的宽度
      wrap.style.width = swiper.length * swiper[0].offsetWidth + "px";
      wrap.style.transform = "translateX(" + -speed + "px)";
      let index = 0;
      wrap.onmousedown = (e) => {
        X1 = e.pageX;
        X2 = X1;
        let s = wrap.offsetLeft;
        document.onmousemove = (e) => {
          X2 = e.pageX;
          let left = X2 - X1;
          wrap.style.transition = "none";
          wrap.style.left = s + left + "px";
          e.preventDefault()  //阻止屏幕滚动的行为
          flag = true
        };
        document.onmouseup = () => {
          if(flag){
            if(Math.abs(X2 - X1) > contain.offsetWidth / 4){
            if(X1<X2){
              index--
            }else{
              index++
            }
            wrap.style.transition = "all 0.5s";
            wrap.style.left = -index * speed + "px";
            if (index < 0) {
              index = 5
            }
            if(index>=6){
              index = 0
            }
            setTimeout(() => {
                wrap.style.transition = 'none'
                wrap.style.left = -index * speed + "px";
              }, 500);
          }else {
            wrap.style.transition = 'all 0.5s'
            wrap.style.left = s + "px";
          }
          }
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    </script>
  </body>
</html>
